jQuery中的动画个人分享

jQuery动画

jQuery动画分为两种分别是预定义动画和自定义动画
- 所谓预定义动画就是jQuery已经封装好的
- 自定义动画就是需要自己定义的动画

预定义动画

显示与隐藏

show()方法 - 用于将指定元素显示
show()无参数用法 - 不写参数就没有动画效果
show(speed,easing,fn) - 通过同时改变元素的高度和宽度实现动画效果
speed参数 - 表示动画执行的时长('slow','normal'和'fast')
自定义动画执行时长是以毫秒为单位
easing - 用来指定切换效果,默认是'swing',,可用参数是'linear'
easing一般是配合第三方插件使用(不常用)
fn - 表示动画执行完毕后调用的函数

示例代码:

    <script src="js/jquery.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    /*
        显示与隐藏
        1.无动画版本
          * show() - 显示
          * hide() - 隐藏
        2.有动画版本 - 同时改变宽度和高度
          * show(speed, callback)
            * speed - 动画执行的时长，单位为毫秒
            * callback - 动画执行完毕后的回调函数
          * hide(speed, callback)
            * speed - 动画执行的时长，单位为毫秒
            * callback - 动画执行完毕后的回调函数
     */
    $('#box').hide(3000, function(){
        $('#box').show(3000);
    });

</script>
</body>

滑动式动画效果

slideDown()和slideUp()只存在具有具有动画效果的方法
- 注意 - 没有无动画版本(底层代码预定义动画执行的时长)
- 效果 - 改变指定元素的高度

示例代码:

    <script src="js/jquery.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    /*
        滑动式动画 - slideUp()和slideDown()
        * 注意 - 没有无动画版本(底层代码预定义动画执行的时长)
        * 效果 - 改变指定元素的高度
     */
    $('#box').slideUp(3000);
    $('#box').slideDown(3000);

</script>
</body>

淡入淡出动画

示例代码:

    <script src="js/jquery.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    // 改变的元素的透明度
    $('#box').fadeOut(3000);
    $('#box').fadeIn(3000);

</script>
</body>

自定义动画

animate()方法

animate(perproties,duration,callback)
perproties - object类型, 表示设置CSS样式属性和值
duration - 表示动画执行的时长,以毫秒为单位
callback - 表示当动画执行完毕后调用的函数
备注: 动画执行效果 - css样式“用大括号｛｝包裹

示例代码:

    <script src="js/jquery.js"></script>
    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: cyan;

            position: absolute;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    /*
        animate()方法 - 表示自定义动画方法
          1. animate(properties,duration,callback)
            * properties - 表示CSS样式属性
              * 设置动画执行结束的样式属性值
            * duration - 表示动画执行的时长,以毫秒为单位
            * callback - 表示动画执行完毕后的回调函数
          2. animate(properties, options)
            * properties - 表示CSS样式属性
              * 设置动画执行结束的样式属性
            * options - 表示设置动画的相关参数
              * duration - 表示动画执行的时长,以毫秒为单位
              * complete - 表示动画执行完毕后的回调函数
              * queue - 布尔值,设置是否添加到动画队列中
     */
    /*$('#box').animate({
        width :800,
        height :600
    },5000);*/

    /*$('#box').animate({
        left :200
    },3000);*/

    $('#box').animate({
        left : 100
    }, {
        speed : 3000
    });
</script>
</body>

并发与排队效果

并发效果 - 设置多个样式属性 - 执行动画时, 同时改变所有样式属性的值
排队效果 - 设置多个样式属性值 - 执行动画时, 按照先后顺序改变样式属性值

示例代码:

    <script src="js/jquery.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightcoral;

            position: absolute;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    /*
        并发效果 - 就是指多个动画同时执行
        * 多个CSS的样式属性值同时改变 - 动画多个值综合效果
     */
    /*$('#box').animate({
        left : 400,
        top : 400
    }, 3000);*/

    /*
        排队效果 - 就是指多个动画按照定义的先后顺序执行
        * 多个CSS的样式属性值先后改变
     */
    /*$('#box').animate({
        left : 400
    }, 3000, function(){
        $('#box').animate({
            top : 400
        }, 3000);
    });*/

    // queue - 用于控制当前的动画效果是并发还是排队效果
    $('#box').animate({
        left : 400
    }, {
        duration : 3000
    }).animate({
        top : 400
    }, {
        duration : 3000,
        queue : true
    });

</script>
</body>

停止执行动画

stop()方法没有接收任何参数时 - 立即停止执行动画
stop(queue)方法的第一个参数
- false - 表示停止当前动画，但队列中的动画继续执行
- true - 表示停止当前动画，并且清空动画队列
stop(queue, gotoEnd)方法的第二个参数
- false - 不会做任何处理
- true - 表示停止当前动画，并且将指定元素设置为动画执行完毕后的样式

示例代码:

    <script src="js/jquery.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightcoral;

            position: absolute;
        }
    </style>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<div id="box"></div>
<script>
    $('#start').click(function(){
        $('#box').animate({
            left : 800
        }, 3000).animate({
            top : 600
        }, 3000);
    });
    $('#stop').click(function(){
        /*
            * stop()方法没有接收任何参数时 - 立即停止执行动画
            * stop(queue)方法的第一个参数
              * false - 表示停止当前动画，但队列中的动画继续执行
              * true - 表示停止当前动画，并且清空动画队列
            * stop(queue, gotoEnd)方法的第二个参数
              * false - 不会做任何处理
              * true - 表示停止当前动画，并且将指定元素设置为动画执行完毕后的样式
         */
        $('#box').stop(true, false);
    });

</script>
</body>

延迟执行动画

delay( )方法 - 表示为指定元素设置的动画效果进行延迟执行“括号中填写动画延迟多少时间 - 以毫秒为单位计算

示例代码:

    <script src="js/jquery.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightcoral;

            position: absolute;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    $('#box').animate({
        left: 800
    }, 3000).delay(1000).animate({
        top: 600
    }, 3000);

</script>
</body>

jQuery中的动画个人分享

jQuery动画

预定义动画

显示与隐藏

滑动式动画效果

淡入淡出动画

自定义动画

animate()方法

并发与排队效果

停止执行动画

延迟执行动画

a达达

引用和评论

Ajax系列之JSON数据格式

采用测试驱动开发理念(Test Driven Development)进行 SAP UI5 应用的功能开发(二)试读版